<template>
    <div style="width: 80%">
        <div style="margin-bottom: 30px">新增借书记录</div>
        <el-form :inline="true" :rules="rules" ref="ruleForm" :model="form" label-width="100px">
            <!--            <el-form-item label="图书标准码" prop="bookNo">
                <el-select v-model="form.bookNo" clearable filterable placeholder="请选择" @change="selBook">
                    <el-option
                            v-for="item in books"
                            :key="item.id"
                            :label="item.bookNo"
                            :value="item.bookNo">
                    </el-option>
                </el-select>
            </el-form-item >-->
            <el-form-item label="图书标准码" prop="bookNo">
                <el-select v-model="form.bookNo" filterable remote reserve-keyword placeholder="请输入关键词" @change="selBook">
                    <el-option v-for="item in books" :key="item.id" :label="item.bookNo" :value="item.bookNo">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="图书名称" prop="bookName">
                <el-input v-model="form.bookName" disabled></el-input>
            </el-form-item>
            <el-form-item label="可借数量" prop="nums">
                <el-input v-model="form.nums" disabled></el-input>
            </el-form-item>
            <br />
            <el-form-item label="学号" prop="studentId">
                <el-select v-model="form.studentId" filterable remote reserve-keyword placeholder="请输入关键词"
                    @change="selUser">
                    <el-option v-for="item in users" :key="item.id" :label="item.studentId" :value="item.studentId">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="用户姓名" prop="username">
                <el-input disabled v-model="form.username"></el-input>
            </el-form-item>
        </el-form>

        <div style="text-align: center; margin-top: 30px">
            <el-button type="primary" @click="save" size="medium">提交</el-button>
        </div>
    </div>
</template>

<script>
import request from "@/utils/request";

export default {
    name: 'AddBorrowRecord',
    data() {
        return {
            form: {
                bookNo: '', // 图书标准码
                bookName: '', // 图书名称
                nums: '', // 可借数量
                studentId: '', // 学号
                username: '' // 用户姓名
            },
            books: [], // 图书列表
            users: [], // 用户列表
            rules: {
                bookNo: [
                    { required: true, message: '请选择图书标准码', trigger: 'blur' }
                ],
                studentId: [
                    { required: true, message: '请选择学号', trigger: 'blur' }
                ]
            },
            loading: false,
        }
    },
    created() {
        this.getBooks()
        this.getUsers()
    },
    methods: {
        // 获取图书列表
        getBooks() {
            request.get('/book/list').then(res => {
                this.books = res.data
            })
        },
        // 获取用户列表
        getUsers() {
            request.get('/user/list').then(res => {
                this.users = res.data
            })
        },
        // 保存借书记录
        save() {
            this.$refs['ruleForm'].validate((valid) => {
                if (valid) {
                    request.post('/borrow/save', this.form).then(res => {
                        if (res.code === '200') {
                            this.$notify.success('新增成功')
                            this.$refs['ruleForm'].resetFields()
                        } else {
                            this.$notify.error(res.msg)
                        }
                    })
                }
            })
        },
        // 选择图书
        selBook() {
            const book = this.books.find(v => v.bookNo === this.form.bookNo)
            request.get('/book/' + book.id).then(res => {
                this.$set(this.form, 'bookName', res.data.name)
                this.form.nums = res.data.available
                this.form.bookId = book.id
            })
        },
        // 选择用户
        selUser() {
            const user = this.users.find(v => v.studentId === this.form.studentId)
            request.get('/user/' + user.id).then(res => {
                this.$set(this.form, 'username', res.data.name)
                this.form.userId = user.id

            })
        }
    }
}
</script>
